<template>
  <div class="wrapper">
    <header class="headerBox" >头部</header>
    <section class="sidebar">导航</section>
    <section class="contenBox">内容区域</section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      key: 2
    }
  }
}
</script>

<style scoped lang="stylus">
.wrapper{
  width 100%
  height 100%
  .headerBox{
    position relative
    width 100%
    height 45px
    background-color #1f2d3d
  }
  .sidebar{
    position absolute
    left 0
    top 45px
    bottom 0
    overflow-y scroll
    width 250px
    background-color #324057
    &::-webkit-scrollbar{
      display none
    }
  }
  .contenBox{
    position absolute
    left 250px
    top 45px
    right 0
    bottom 0
    transition left .3s ease-in-out
    background-color #fff
  }
}
</style>
